<template>
    <view>
        <z-paging ref="paging" @pageScroll="pageScroll" v-model="spLIst" @query="queryList" :refresher-enabled="false">
            <v-headerview actionBarColor="#ffffff" :showBackIcon="true" titleColor="#000" pageTitle="兑换记录">
                <view class="" style="height: 172rpx;"></view>
                <view class="tabs_box">
                    <view class="dandu_box" :class="selId == item.id ? 'dandu_box1' : ''" v-for="(item, index) in list"
                        :key="index" @click="sel(item)">{{ item.name }}
                    </view>
                </view>

                <view class="dange_dhjs_box" v-for="(item, index) in spLIst" :key="index">
                    <view class="t_box">
                        <view class="">{{ selId == 1 ? "兑换菜品" : "积分转盘" }}</view>
                        <view class="">{{ item.created_at }}</view>
                    </view>
                    <view class="c_box">
                        <view class="left_box">
                            <view class="image">
                                <image class="" :src="item.goods_image" />
                            </view>
                            <view class="name_box">
                                <view class="top_box">{{ item.goods_name }}</view>
                                <view class="bot_box">x {{ item.num }}</view>
                            </view>
                        </view>
                        <view class="right_box">
                            <view class="to_box">{{ item.total_amount }}</view>
                            <view class="bo_box">积分</view>
                        </view>
                    </view>
                </view>
            </v-headerview>
        </z-paging>
    </view>

</template>

<script>
export default {
    components: {},
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: '积分兑换'
                },
                {
                    id: 2,
                    name: '幸运转盘'
                },],
            spLIst: [],
            selId: 1
        };
    },
    onLoad(e) {

    },
    onShow() {
        this.getList()
    },
    methods: {
        sel(item) {
            this.selId = item.id
            this.$refs.paging.reload()
        },
        // 监听滚动高度
        pageScroll(event) {
            console.log(event)
            uni.$emit("onPageScroll", event.detail.scrollTop)
        },
        queryList(pageNo, pageSize) {
            let data = {
                page: pageNo,
                limit: pageSize,
                type: this.selId
            }
            this.$Request.post(this.$api.index.ordersIntegralExchangeRecord, data).then(res => {
                this.$refs.paging.complete(res.data.data)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.zp-scroll-view-absolute {
    background-image: none !important;
    background-color: #f1f1f1 !important;
    position: relative !important;
}

.tabs_box {
    width: 80%;
    height: 60rpx;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1rpx solid #f64b43;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    .dandu_box {
        width: 50%;
        height: 100%;
        text-align: center;
        line-height: 60rpx;
        color: #000;

        &.dandu_box1 {
            background-color: #f64b43;
            color: #fff;
        }
    }
}

.dange_dhjs_box {
    width: 700rpx;
    height: 240rpx;
    background-color: #fff;
    margin: auto;
    border-radius: 30rpx;
    margin-bottom: 20rpx;


    .t_box {
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 24rpx;
        color: #989898;
        border-bottom: 1rpx solid #f1f1f1;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;


    }

    .c_box {
        width: 100%;
        height: 180rpx;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box {
            width: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .image {
                width: 130rpx;
                height: 130rpx;
                border-radius: 10rpx;
                margin-right: 18rpx;

                image {
                    width: 130rpx;
                    height: 130rpx;
                    border-radius: 10rpx;
                }
            }

            .name_box {
                width: auto;
                height: 130rpx;

                .top_box {
                    width: auto;
                    height: 75rpx;
                    line-height: 90rpx;
                    color: #333;
                    font-size: 26rpx;
                }

                .bot_box {
                    width: auto;
                    height: 75rpx;
                    line-height: 40rpx;
                    font-size: 26rpx;
                    color: #333;
                }
            }
        }

        .right_box {
            width: auto;
            height: 130rpx;

            .to_box {
                width: auto;
                height: 75rpx;
                line-height: 90rpx;
                font-size: 30rpx;
                color: #f64b43;
            }

            .bo_box {
                width: auto;
                height: 75rpx;
                line-height: 40rpx;
                font-size: 22rpx;
                color: #989898;
            }
        }
    }


}
</style>